import 'package:flutter/material.dart';

//Flutter 富文本
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: Rotating3DPageView(),
    );
  }
}

//🎡 案例 2：3D 旋转切换效果
//实现类似 3D 立方体旋转的页面切换效果。
class Rotating3DPageView extends StatefulWidget {
  @override
  _Rotating3DPageViewState createState() => _Rotating3DPageViewState();
}

class _Rotating3DPageViewState extends State<Rotating3DPageView> {
  final PageController _pageController = PageController(viewportFraction: 0.8);
  double _currentPage = 0.0;

  @override
  void initState() {
    super.initState();
    _pageController.addListener(() {
      setState(() {
        _currentPage = _pageController.page!;
      });
    });
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('3D旋转效果')),
      body: PageView.builder(
        controller: _pageController,
        itemCount: 5,
        itemBuilder: (context, index) {
          final double relativePosition = index - _currentPage;
          final double rotationY = relativePosition * 0.5; // Y轴旋转角度
          final double scale = 1.0 - (relativePosition.abs() * 0.2); // 缩放
          final double opacity = 1.0 - (relativePosition.abs() * 0.5); // 透明度

          return AnimatedBuilder(
            animation: _pageController,
            builder: (context, child) {
              return Transform(
                alignment: Alignment.center,
                transform: Matrix4.identity()
                  ..setEntry(3, 2, 0.001) // 透视变换
                  ..rotateY(rotationY.clamp(-0.5, 0.5)), // 限制旋转角度范围
                child: Container(
                  margin: EdgeInsets.symmetric(vertical: 20, horizontal: 10),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(16),
                    color: Colors.blue[100 * (index % 9 + 1)],
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black26,
                        blurRadius: 10,
                        offset: Offset(0, 4),
                      ),
                    ],
                  ),
                  child: Transform.scale(
                    scale: scale.clamp(0.8, 1.0),
                    child: Opacity(
                      opacity: opacity.clamp(0.5, 1.0),
                      child: Center(
                        child: Text(
                          '3D 页面 ${index + 1}',
                          style: TextStyle(
                            fontSize: 28,
                            fontWeight: FontWeight.bold,
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}
